<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>普通练习</title>
    <script src="ROOT_PATH/static/js/jquery-3.5.1.min.js"></script>
    <script src="ROOT_PATH/static/js/vue.min.js"></script>
    <style>
        .my-table{
            margin-left:50px;
        }
        .my-input{
            width: 120px;
            margin-left: 20px;
        }
        td.result{
            padding-left: 10px;
        }
        td.result span{
            display: none;
        }
        td.result span.right{
            color:green;
        }
        td.result span.error{
            color:red;
        }
    </style>
</head>
<body>
    <table>
        <tbody>
            {foreach $list as $val}
            <tr>
                <td>{$val.name}</td>
                <td>
                    <input type="text" value="" data-value="{$val.id}" class="my-input">
                </td>
                <td class="result">
                    <span class="right">√</span>
                    <span class="error">X</span>
                </td>
            </tr>
            {/foreach}
        </tbody>
    </table>
</body>
</html>

<script>
    $("input.my-input").on('change', function(){
        let value = $(this).val().trim();
        let id = $(this).data('value');
        $(this).parent().next().find('span').hide();
        if(value != id){
            $(this).parent().next().find('span.error').show();
        }else{
            $(this).parent().next().find('span.right').show();
        }
    })

    $(document).keydown(function (event) {
        if (event.keyCode == 13) {
            let curr_input = $("input:focus");
            curr_input.parents('tr').next().find('input').focus();
        }
    });

</script>